<template>
  <div>
    <van-nav-bar
      :title="$route.query.title + '>'"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail_news">
      <p>[留言版]:{{ $route.query.newtitle }}</p>
      <van-tag mark type="primary">新闻详情</van-tag>
      <!-- <div>详情咨询</div> -->
      <p class="detailItem">
        虎扑2月4日讯
        今天NBA常规赛老鹰主场对阵太阳的比赛已经结束。全场战罢，老鹰以124-115战胜太阳。
      </p>
      <p class="detailItem">
        本场比赛，老鹰球员特雷-杨出战35分钟，25投16中，其中三分球11投6中，罚球7投5中，得到43分5助攻1抢断。
      </p>
      <p class="detailItem">
        不算本场比赛，本赛季常规赛特雷-杨场均上场34分钟，得到27.7分4.1篮板9.3助攻1.1抢断0.1盖帽。
      </p>
    </div>
    <div class="comment_container">
      <van-tag mark color="#7232dd">评论区</van-tag>
      <div class="comment_bar">评论数{{commentDataList.length}}</div>
      <van-empty description="暂无评论" v-if="commentDataList.length == '0'" />
      <ul>
        <li v-for="item in commentDataList" :key="item.id">
          <div class="icon_container">
            <van-image round width="1rem" height="1rem" :src="item.img_src" />
          </div>
          <div class="comment_detaial">
            <div class="comment_name">{{ item.username }}</div>
            <div class="comment">{{ item.comment }}</div>
          </div>
          <van-icon name="good-job-o" class="handle_thumbs_up" :class="{'handle_thumbs_up_active': item.isLike}" @click="handleLike(item.id)"/>
          <span class="delect" @click="handleDelectComment(item.id)">删除</span>
        </li>
      </ul>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="share">转发</van-tabbar-item>
      <van-tabbar-item icon="comment-o" @click="show = true"
        >评论</van-tabbar-item
      >
      <van-tabbar-item icon="thumb-circle-o" :info="like" @click="like++"
        >点赞</van-tabbar-item
      >
    </van-tabbar>
    <!-- popup弹出层 -->
    <van-popup v-model="show" position="bottom" :overlay="false">
      <van-form @submit="onSubmit" class="loginForm">
        <van-field v-model="comment" name="comment" placeholder="写评论" />
        <van-button type="danger" style="float: right" native-type="submit"
          >发表</van-button
        >
      </van-form>
    </van-popup>
  </div>
</template>

<script>
// 生成唯一id
import {algorithm} from './getCommentUid'
// 随机生成姓名
import {getName} from './getRamdomName'
export default {
  data() {
    return {
      like: "",
      show: false,
      comment: "",
      active: 0,
      commentDataList: [
        {
          username: "成明",
          comment: "成明你好帅",
          img_src: "https://img.paulzzh.tech/touhou/random ",
          id:algorithm(),
          isLike:true
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      // 跳转回上一级路由
      this.$router.back();
    },
    onSubmit(values) {
      if (this.comment == "") {
        return this.$toast.fail("评论信息不得为空");
      }
      this.commentDataList.push({ ...values, username: getName() ,img_src:'https://img.paulzzh.tech/touhou/random ',id:algorithm(),isLike:false},);
      this.$toast.success("发表评论成功");
      console.log(this.commentDataList);
      this.show = false;
    },
    // 删除评论
    handleDelectComment(id){
      const that = this;
this.$dialog.confirm({
  message: '是否确认删除评论'
}).then(() => {
   that.commentDataList =  that.commentDataList.filter(item =>{
        return item.id != id
      })
       that.$toast.success('删除成功');
}).catch(() => {
});
    },
    handleLike(id){
    let idArr = this.commentDataList.map(item =>{
      return item.id
    })
    const  index  = idArr.indexOf(id)
    this.commentDataList[index].isLike  = !this.commentDataList[index].isLike
    }
  },
  created() {
    // console.log(this.$route);
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.detail_news {
  background-color: #fff;
  padding: 0 0.3rem;
  div {
    font-size: 0.39rem;
  }
  p {
    font-size: 0.46rem;
    font-weight: 500;
  }
  .detailItem {
    font-size: 0.38rem;
    font-weight: 500;
  }
}
.comment_container {
  background-color: #fff;
  padding: 0 0.3rem;
  height: 20rem;
  .comment_bar {
    width: 100%;
    // text-align: center;
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 0.7rem;
    height: 0.7rem;
    border-bottom: 1px solid #000;
    // background-color: pink;
  }
  ul {
    width: 100%;
    li {
      position: relative;
      width: 100%;
      display: inline-block;
      height: 1.8rem;
      padding: 0.3rem 0.3rem 0.3rem 0;
      display: flex;
      // align-items: center;
      .icon_container {
        flex: 1.5;
      }
      .comment_detaial {
        flex: 8;
        height: 100%;
        border-bottom: 1px solid #ccc;
        .comment_name {
          font-size: 0.35rem;
          color: #ccc;
        }
        .comment {
          margin-top: 0.2rem;
          font-size: 0.4rem;
        }
      }
     .delect {
       position: absolute;
       bottom: 0.8rem;
       right: 0.3rem;
       font-size: 0.3rem;
       color: red;
     }
     .handle_thumbs_up {
      position: absolute;
       bottom: 0.8rem;
       right: 1.3rem;
       font-size: 0.4rem;
      //  color: red;
     }
     .handle_thumbs_up_active {
       color: red;
     }
    }
  }
}
.setComment {
  width: 100%;
  height: 4rem;
}
</style>